:root {
    /* Enhanced Dark Mode Color Palette */
    --sl-color-accent-low: #0a2520;
    --sl-color-accent: #e0e0e0;
    --sl-color-accent-high: #f5f5f5;
    --sl-color-white: #d4b896;
    --sl-color-gray-1: #d4a1db;
    --sl-color-gray-1-1: #a68ca8;
    --sl-color-gray-2: #c8c8c8;
    --sl-color-gray-3: #8a8a8a;
    --sl-color-gray-4: #e67373;
    --sl-color-gray-5: #d4d4d4;
    --sl-color-gray-6: #6b4a7e;
    --sl-color-black: #0f0e14;

    /* Enhanced Buttons */
    --sl-button-bg-primary: #4a9b7f;
    --sl-button-bg-secondary: #6b5180;

    /* Interactive Elements */
    --react-toggle-checked: #c866d1;

    /* Content Areas */
    --details-1: #1e1e20;
    --details-2: #6b4a7e;
    --details-3: #664a75;

    /* Links with Better Contrast */
    --url-colour: #66d9b8;
    --url-colour-hover: #8fd3e8;

    /* Code Styling */
    --code-inline-background: #2a1a2f;
    --code-inline-color: #e0e0e0;
    --code-inline-border: #6c9;

    /* Tabs */
    --tab-background-if: #c4b4cc;
    --tab-background-oof: #664a75;
    --tab-color-if: #0a0a0a;
    --tab-color-oof: #9e9ea2;

    /* UI Elements */
    --steps-border: #c866d1;
    --modal-url-color: var(--sl-color-black);
    --modal-url-hover-color: #fff;
    --modal-url-bg-color: var(--code-inline-border);
    --modal-url-bg-hv-color: #2ec7bf;

    /* Enhanced Shadows and Effects */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    /* Improved Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

:root[data-theme="light"] {
    /* Enhanced Light Mode Color Palette */
    --sl-color-accent-low: #e8f5f2;
    --sl-color-accent: #0d4d3f;
    --sl-color-accent-high: #002d26;
    --sl-color-white: #1a1a1a;
    --sl-color-gray-1: #2a2a2a;
    --sl-color-gray-2: #333;
    --sl-color-gray-3: #555;
    --sl-color-gray-4: #777;
    --sl-color-gray-5: #999;
    --sl-color-gray-6: #bbb;
    --sl-color-gray-7: #e8e4f0;
    --sl-color-black: #f8f8f8;

    /* Enhanced Light Mode Buttons */
    --sl-button-bg-primary: #d4e8dc;
    --sl-button-bg-secondary: #e0d4e8;

    /* Interactive Elements */
    --react-toggle-checked: #9f4aa8;

    /* Content Areas - Fixed contrast issues */
    --details-1: #f0f8f4;
    --details-2: #e8f0f8;
    --details-3: #f5f5f5;

    /* Links with Better Contrast */
    --url-colour: #7a0fa3 !important;
    --url-colour-hover: #1a6b5f !important;

    /* Code Styling */
    --code-inline-background: #f8faf9;
    --code-inline-color: #1a1a1a;
    --code-inline-border: #4a9b7f;

    /* Tabs */
    --tab-background-if: #e8f5f2;
    --tab-background-oof: #f0e8f5;
    --tab-color-if: #1a1a1a;
    --tab-color-oof: #666;

    /* UI Elements */
    --steps-border: #9f4aa8;
    --modal-url-color: #1a1a1a;
    --modal-url-hover-color: #000;
    --modal-url-bg-color: var(--code-inline-border);
    --modal-url-bg-hv-color: #2ec7bf;

    /* Enhanced Shadows and Effects for Light Mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.16);
}

/* Theme adjustments */

.sl-steps li::before {
    border: 1px solid var(--steps-border) !important;
    box-shadow: none !important;
    border-radius: 0% !important;
    line-height: 2em !important;
}

.sl-steps li::after {
    border: 1px solid var(--steps-border) !important;
}

.right-sidebar.astro-67yu43on {
    max-width: 100%;
}

p a {
    color: var(--url-colour) !important;
}

p a:hover {
    color: var(--url-colour-hover) !important;
}

[data-has-sidebar] {
    .sl-container {
        max-width: 100%;
    }
}

.sl-markdown-content code:not(:where(.not-content *)) {
    background-color: var(--code-inline-background);
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--code-inline-color);
    border: 1px solid var(--code-inline-border);
    padding: 0.2em 0.4em;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.sl-markdown-content code:not(:where(.not-content *)):hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Enhanced button styles */
.sl-flex.action.primary.astro-yjy4zhro,
.sl-flex.action.secondary.astro-yjy4zhro {
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
    border-radius: 6px !important;
}

.sl-flex.action.primary.astro-yjy4zhro:hover,
.sl-flex.action.secondary.astro-yjy4zhro:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}


/* resize the card svg logos */

.card-logos-image * {
    max-height: 100px;
    min-height: 100px;
    width: 100%;
}

/* front page card stuff */

.float-container {
    padding: 0;
}

.float-child {
    padding: 100px;
}

.float-child.card-image {
    width: 50%;
    max-width: 100px;
    min-height: 150px;
    float: left;
    padding: 0;
}

.float-child.card-text {
    margin: auto;
    padding: 0;
    padding-left: 10px;
}

/* front page button stuff */

.title {
    align-items: left !important;
    margin-left: 31% !important;
}

.card-image {
    margin-right: 5% !important;
    margin-left: 2% !important;
    width: 150px !important;
    max-width: 150px;
    padding: 0;
}

.sl-flex.actions.astro-jbfsktt5 a {
    min-width: 45%;
    border: 3px solid var(--sl-color-white);
}

.sl-flex.action.primary.astro-yjy4zhro {
    border-radius: 6px !important;
    background-color: var(--sl-button-bg-primary) !important;
    padding: 8px 16px !important;
    border-color: var(--sl-button-bg-secondary) !important;
    color: var(--sl-color-accent) !important;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.sl-flex.action.primary.astro-yjy4zhro:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.1);
}

.sl-flex.action.secondary.astro-yjy4zhro {
    border-radius: 6px !important;
    background-color: var(--sl-button-bg-secondary) !important;
    padding: 8px 16px !important;
    border-color: var(--sl-button-bg-primary) !important;
    color: var(--sl-color-accent) !important;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.sl-flex.action.secondary.astro-yjy4zhro:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.1);
}

/* Enhanced tabs styling */

a[aria-selected="true"] {
    border-top: 2px solid var(--sl-color-accent-high) !important;
    border-bottom: 2px solid var(--sl-color-accent-high) !important;
    color: var(--tab-color-if) !important;
    background-color: var(--tab-background-if) !important;
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
}

a[tabindex="-1"] {
    border-top: 1px solid var(--sl-button-bg-secondary) !important;
    border-bottom: 1px solid var(--sl-button-bg-secondary) !important;
    background-color: var(--tab-background-oof) !important;
    color: var(--tab-color-oof) !important;
    transition: var(--transition-fast);
}

a[tabindex="-1"]:hover {
    background-color: var(--tab-background-if) !important;
    opacity: 0.8;
}

/* react toggle start */

.toggle-global {
    margin: 20px 16px 16px 0;
    padding-top: 5px;
    padding-left: 5px;
}

.react-toggle-track-x {
    margin: 0 3px 0 0;
    padding-bottom: 17px;
}

.react-toggle-track-check {
    margin: 0;
    padding-bottom: 16px;
}

.react-toggle-track {
    min-width: 16px;
    background-color: #6d6d6d !important;
}

.react-toggle-thumb {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: 3px solid !important;
    border-color: #54c59f !important;
}

.react-toggle .react-toggle-thumb {
    background-color: #c7a06f !important;
}

.react-toggle--checked .react-toggle-thumb {
    background-color: #8464c6 !important;
}

.react-toggle--checked .react-toggle-track {
    background-color: var(--react-toggle-checked) !important;
}


/* react toggle end */

/* react tooltip end */

.my-tooltip {
    padding-bottom: 5px !important;
    position: absolute !important;
    z-index: 9999 !important;
    max-width: 400px;
    max-height: 400px;
    border: 2px solid var(--react-toggle-checked);
    opacity: 1 !important;
}

/* react tooltip end */

/* make sure there is a gap when it is rendered on page */

#Advanced-class {
    padding-top: 15px;
    margin: auto;
}

/* resized main widows where toc is fml */

.main-pane {
    min-width: 75% !important;
}

/* .tooltip-link {} */

.tooltip-line {
    display: block;
    margin-bottom: 2px;
}

.custom-content .mxgraph {
    width: 100% !important;
    height: 100% !important;
}

/* starlight aside stuff */

.starlight-aside {
    color: var(--sl-color-gray-2) !important;
    padding: 1rem;
    border-inline-start: 0.25rem solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

.expressive-code .ec-line {
    tab-size: 4;
}

.starlight-aside__icon {
    display: none !important;
}

.starlight-aside--note .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(76, 179, 212);
    border-radius: 100%;
}

.starlight-aside--tip .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(0, 148, 0, 1);
    border-radius: 100%;
}

.starlight-aside--caution .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(230, 167, 0);
    border-radius: 100%;
}

.starlight-aside--danger .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(225, 50, 56);
    border-radius: 100%;
}

.starlight-aside--note {
    border-color: rgba(76, 179, 212);
    background-color: rgba(76, 179, 212, 0.05);
}

.starlight-aside--tip {
    border-color: rgba(0, 148, 0);
    background-color: rgba(0, 148, 0, 0.05);
}

.starlight-aside--caution {
    border-color: rgba(230, 167, 0);
    background-color: rgba(230, 167, 0, 0.05);
}

.starlight-aside--danger {
    border-color: rgba(225, 50, 56);
    background-color: rgba(225, 50, 56, 0.05);
}

.starlight-aside__title {
    margin-top: -8px !important;
    margin-left: 0 !important;
    margin-bottom: -5px !important;
}

.starlight-aside__content {
    margin-bottom: -10px !important;
    padding-bottom: 0 !important;
}

[class*="starlight-aside--"] {
    background-color: transparent !important;
}

.my-icon-container {
    padding: 0 0 10px 10px;
}

.my-icon-container.star-tip {
    border: 3px solid #ffae35;
}

.my-icon-container.danger {
    border: 3px solid #ba1522;
}

.my-icon-container.warning {
    border: 3px solid #ffae35;
}

.my-icon-container.note {
    border: 3px solid #0095ff;
}

.my-icon-container.tip {
    border: 3px solid #1fc6a0;
}

.my-icon {
    width: 100px !important;
    max-width: 100px !important;
}

.my-icon-image {
    margin-left: -13px !important;
    height: 30px !important;
}

.my-icon-image.tip {
    margin-top: -3.6px !important;
    margin-left: -12.5px !important;
}

.my-icon-image.note {
    margin-top: -2.5px !important;
    margin-left: -12px !important;
}

.my-icon-image.star-tip {
    margin-top: -2.5px !important;
}

.my-icon-image.warning {
    margin-top: -3.6px !important;
    margin-left: -12px !important;
}

.my-icon-image.danger {
    margin-top: -2.5px !important;
    margin-left: -12px !important;
}

.my-icon-text {
    margin-top: 0 !important;
    width: 100% !important;
}

/* .tooltip-link {} */

.tooltip-line {
    display: block;
    margin-bottom: 2px;
}

.tooltippy-line {
    margin: 10px 0 5px 0;
}

.tooltippy-link {
    margin: 0;
}

.tooltippy-div {
    margin: 5px 0 0 0;
}

.tippy-box {
    border: 4px solid var(--react-toggle-checked);
    opacity: 1 !important;
    padding: 5px 4px;
    margin-bottom: 0;
}

/* .tippy-content {} */

.my-tooltip-url {
    color: var(--url-colour) !important;
}

.my-tooltip-url:hover {
    color: var(--url-colour-hover) !important;
    cursor: pointer;
}

.tooltippy-link {
    color: var(--url-colour) !important;
}

.tooltippy-link:hover {
    color: var(--url-colour-hover) !important;
    cursor: pointer;
}

.sl-markdown-content details:not(:where(.not-content *)) {
    --sl-details-border-color--hover: var(--sl-color-gray-1);

    border-inline-start: 0 solid var(--sl-details-border-color);
    padding-inline-start: 0.6rem;
    padding-left: 0 !important;
}

.sl-markdown-content details[open]>summary:not(:where(.not-content *)) {
    margin-bottom: 0;
}

/* Enhanced Light Mode Specific Styling */
:root[data-theme="light"] .sl-markdown-content code:not(:where(.not-content *)) {
    background-color: var(--code-inline-background);
    color: var(--code-inline-color);
    border: 1px solid var(--code-inline-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .sl-markdown-content code:not(:where(.not-content *)):hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .sl-flex.action.primary.astro-yjy4zhro {
    background: linear-gradient(135deg, var(--sl-button-bg-primary), #a8ceb9) !important;
    color: #1a4d3f !important;
    border: 1px solid #4a9b7f !important;
}

:root[data-theme="light"] .sl-flex.action.secondary.astro-yjy4zhro {
    background: linear-gradient(135deg, var(--sl-button-bg-secondary), #bfa8cc) !important;
    color: #3d1f5c !important;
    border: 1px solid #9f4aa8 !important;
}

:root[data-theme="light"] .sl-flex.action.primary.astro-yjy4zhro:hover,
:root[data-theme="light"] .sl-flex.action.secondary.astro-yjy4zhro:hover {
    filter: brightness(0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] a[aria-selected="true"] {
    background: linear-gradient(to bottom, var(--tab-background-if), #f0f8f5) !important;
    border-top: 2px solid #4a9b7f !important;
    border-bottom: 2px solid #4a9b7f !important;
    color: #1a4d3f !important;
}

:root[data-theme="light"] a[tabindex="-1"] {
    background: linear-gradient(to bottom, var(--tab-background-oof), #f8f0f5) !important;
    border-top: 1px solid #d1c2dc !important;
    border-bottom: 1px solid #d1c2dc !important;
    color: #666 !important;
}

:root[data-theme="light"] a[tabindex="-1"]:hover {
    background: linear-gradient(to bottom, #f0f8f5, #e8f5f2) !important;
    opacity: 1;
}


:root[data-theme="light"] .react-toggle-track {
    background-color: #d1c2dc !important;
}

:root[data-theme="light"] .react-toggle--checked .react-toggle-track {
    background-color: var(--react-toggle-checked) !important;
}

:root[data-theme="light"] .react-toggle-thumb {
    border-color: #4a9b7f !important;
    background-color: #fff !important;
}

:root[data-theme="light"] .react-toggle--checked .react-toggle-thumb {
    background-color: #f5f5f5 !important;
}

/* Responsive fix for mobile card image alignment */
@media (max-width: 600px) {

    /* Clear floats after cards */
    .float-container::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Image on left, 40% width */
    .float-child.card-image {
        float: left !important;
        width: 40% !important;
        max-width: 120px !important;
        max-height: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Text on right, 60% width */
    .float-child.card-text {
        float: right !important;
        width: 60% !important;
        padding-left: 10px !important;
        margin: 0 !important;
    }

    /* Override fixed sizing and ensure fluid images */
    .card-image,
    .float-child.card-image img,
    .card-image img {
        width: 100% !important;
        max-width: 120px !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}